<template>
  <div class="note-page">
    <blHeader
      title="随笔"
      subtitle="记录生活的点点滴滴，回忆往事"
      backgroundImage="@/assets/img/banner.jpg"
    />

    <blContainer>
      <template #default>
        <div class="container">
          <div class="tip-container">
            <h2>时间线</h2>
            <h3>共有300篇文章，再接再励</h3>
          </div>
          <div
            class="list"
            v-for="item in 80"
            :key="item"
            @click="router.push('/essay-detail')"
          >
            <div class="list-left">
              <span>03/04</span>
              <span
                >使用 React Native Screens 构建一个 Native Navigation
                之内部原理</span
              >
            </div>
            <div class="list-right">天气：多云/手记</div>
          </div>
        </div>
      </template>
    </blContainer>
  </div>
</template>

<script setup>
const router = useRouter();
</script>

<style lang="less" scoped>
.note-page {
  min-height: 100vh;

  .container {
    max-width: 1000px;
    height: 100%;
    margin: 0 auto;

    .tip-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: fit-content;
      margin-bottom: 100px;

      h2,
      h3 {
        color: @title-color;
      }
    }

    .list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: @title-color;
      padding-bottom: 20px;
      padding-left: 15px;
      cursor: pointer;
      border-left: 2px solid @danger;
      position: relative;

      &::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: @danger;
        position: absolute;
        left: -5px;
      }

      .list-left {
        display: flex;
        align-items: center;
        gap: 10px;

        > span:last-child {
          position: relative;

          &::before {
            position: absolute;
            left: 0;
            content: "";
            display: block;
            bottom: -2px;
            width: 0px;
            height: 2px;
            border-radius: 30px;
            background: @danger;
            transition: width 0.5s;
          }

          &:hover::before {
            width: 100%;
          }
        }
      }
    }

    .list:last-child {
      padding-bottom: 0px;
    }
  }
}
</style>
